<template>
    <div class="dictionares">
        <search-form :searchArray="searchArray" :searchObj="searchObj" @search="getList">
            <el-button class="btn search mL20" @click="add">新增</el-button>
        </search-form>
        <elTable :formData="formData" @getList="getList">
                <el-table-column prop="name" label="字典名称" align="center"></el-table-column>
                <el-table-column prop="typeMessage" label="字典类型" align="center">
                </el-table-column>
                <el-table-column prop="action" label="操作" align="center" width="120px;" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text"  @click="editer(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
        </elTable>
        <dialogs
        :visible="visible"
        :title="`${isEditer ? '编辑' : '新增'}字典`"
        width="500px"
        @confirm="save"
        >
            <el-form v-model="form" label-width="100px">
                <el-form-item prop="name" label="字典名称">
                    <el-input v-model.trim="form.name" placeholder="请输入字典名称"></el-input>
                </el-form-item>
                <el-form-item prop="store" label="字典类型">
                    <el-select v-model="form.type" style="width: 100%;">
                        <el-option  v-for="(item, i) in typeList" :label="item.label" :value="item.value" :key="i"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </dialogs>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import elTable from "@/components/xForm/elTable"
export default {
    name: 'Dictionaries',
    components: {
        elTable
    },
    data () {
        return {
            formData: {
                currentPage: 1,
                pageSize: 10,
                total: 0,
                data: []
            },
            searchObj: {
                type: '',
            },
            searchArray: [
                {
                    type: 'select',
                    value: '',
                    label: '字典类型',
                    placeholder: '请选择',
                    key: 'type',
                    list: []
                },
            ],
            typeList: [],
            visible: {
                show: false
            },
            isEditer: false,
            form: {}
        }
    },
    computed: {
        ...mapGetters({
            enumAll: 'common/getEnumAll'
        }),
    },
    created () {
        this.typeList = this.enumAll['EnumMasterType']
        this.$set(this.searchArray[0], 'list', this.enumAll['EnumMasterType'])
        this.init()
    },
    methods: {
        init () {
            this.getList()
        },
        getList(status = true) {
            if (!status) this.formData.currentPage = 1
            const {searchObj, formData: {currentPage, pageSize}} = this
            this.$loading(true)
            let param = {}
            param = {
                currentPage,
                pageSize
            }
            for (let k in searchObj) {
                if (searchObj[k] !== '') {
                    param[k] = searchObj[k]
                }
            }
            this.$loading(true)
            this.$api.system.getDictionariesList(param).then(r => {
                this.formData.data = r.data && r.data.list || []
                this.formData.total = r.data && r.data.total || 0
            }).finally(() => {
                this.$loading(false)
            })
        },
        editer (item) {
            this.form = {
                name: item.name,
                type: item.type,
                id: item.id
            }
            this.isEditer = true
            this.visible.show = true
        },
        add () {
            this.isEditer = false
            this.visible.show = true
        },
        save () {
            const {type, name} = this.form
            if (!type) {
                this.$message.error('请选择字典类型')
                return
            }
            if (name == '') {
                this.$message.error('请输入字典名称')
                return
            }
            let api = this.isEditer ? 'putUpdateDictionaries' : 'addDictionariesList'
            let param = {}
            param = {
                type,
                name
            }
            if (this.isEditer) param.id  = this.form.id
            this.$loading(true)
            this.$api.system[api](param).then(r => {
                this.$message.success(r.message)
                this.visible.show = false
                setTimeout(() => {
                    this.getList()
                },1000)
            }).finally(() => {
                this.$loading(false)
            })
        }
    },
    watch: {
        'visible.show' (val) {
            if (!val) {
                this.form = {
                    type: '',
                    name: ''
                }
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.dictionares {
    .search-form {
        margin-bottom: 16px;
    }
}
</style>